<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
<title>完美左右切换</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>

*{margin:0px;padding:0px;list-style-type:none;}
.v_out{width:748px;margin:20px auto;overflow:hidden;}
.v_show{width:665px;overflow:hidden;position:relative;height:280px;float:left}
.v_cont{ width:6650px;position:absolute;left:0px;top:0px;}
.v_cont ul{float:left;text-align:center;line-height:50px;}
.v_cont ul li{width:665px;height:250px;background:#f8f8f8;float:left;margin-top:3px;}

 /*---圆圈---*/
.v_out_p{position:relative;overflow:visible}
.circle{position:absolute;left: 40px;top: 290px;}
.circle li{width:120px;height:60px;float:left;margin-right:10px;background:#ccc}
.circle .circle-cur{background:#f00}

 /*---切换---*/
.prev,.next{float:left;padding:105px 9px 0}
.prev a{ background:#f00;}
.prev .ico_1{ background:url(input_a.gif) no-repeat 0 -3757px;}

.next a{background:#f00 }
.next .ico_2{background:url(input_a.gif) no-repeat right -3757px;}
.prev,.prev a,.next,.next a{width:21px;height:28px; display:block}

</style> 
</head>
<body>

<div class="v_out v_out_p">
	<div class="prev"><a href="javascript:void(0)"></a></div>
    <div class="v_show">
		<div class="v_cont">
			<ul>
				<li index="0" style="background:#f00">[第1讲]</li>
				<li index="1" style="background:#ff0">[第2讲]</li>
				<li index="2" style="background:#f0f">[第3讲]</li>
				<li index="3" style="background:#999">[第4讲]</li>
				<li index="4" style="background:#666">[第5讲]</li>
			</ul>
		</div>	   
	</div>
	<div class="next"><a href="javascript:void(0)"></a></div>
    <ul class="circle">
	  	<li class="circle-cur">1</li>
	  	<li>2</li>
	  	<li>3</li>
	  	<li>4</li>
	  	<li>5</li>
	</ul>

</div>
   
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">      
$(function(){
	/*======next======*/
	$(".next a").click(function(){ nextscroll() });
		function nextscroll(){
			var vcon = $(".v_cont ");
            var offset = ($(".v_cont li").width())*-1;
            vcon.stop().animate({left:offset},"slow",function(){
				var firstItem = $(".v_cont ul li").first();
                    vcon.find("ul").append(firstItem);
                    $(this).css("left","0px");
					circle()
                }); 
        };

        function circle(){
            var currentItem = $(".v_cont ul li").first();
            var currentIndex = currentItem.attr("index");
            $(".circle li").removeClass("circle-cur");
            $(".circle li").eq(currentIndex).addClass("circle-cur");
        }

        //setInterval(nextscroll,2000)
         
        /*======prev======*/
        $(".prev a").click(function(){
            var vcon = $(".v_cont ");
            var offset = ($(".v_cont li").width()*-1);
            var lastItem = $(".v_cont ul li").last();
            vcon.find("ul").prepend(lastItem);
            vcon.css("left",offset);
            vcon.animate({left:"0px"},"slow",function(){
                 circle()
            })
     	});

       /*======btn====circle======*/
     	var animateEnd = 1;

        $(".circle li").click(function(){

			if(animateEnd==0){return;}

			$(this).addClass("circle-cur").siblings().removeClass("circle-cur");

			var nextindex = $(this).index();
			var currentindex = $(".v_cont li").first().attr("index");
			var curr = $(".v_cont li").first().clone();
			    
			if(nextindex > currentindex){
		        for (var i = 0; i < nextindex - currentindex; i++) {					             
		            var firstItem = $(".v_cont li").first();
		     		$(".v_cont ul").append(firstItem); 					            	
		        }

		        $(".v_cont ul").prepend(curr);
		        var offset = ($(".v_cont li").width())*-1;

		        if(animateEnd==1){
		        	animateEnd=0;
		            $(".v_cont").stop().animate({left:offset},"slow",function(){
	             		$(".v_cont ul li").first().remove();
	             		$(".v_cont").css("left","0px");
	             		animateEnd=1;
		            }); 
		        }

			}else{

		        var curt = $(".v_cont li").last().clone();

		        for (var i = 0; i < currentindex - nextindex; i++) {
		             var lastItem = $(".v_cont li").last();
		             $(".v_cont ul").prepend(lastItem);
		        }

		        $(".v_cont ul").append(curt);
		        var offset = ($(".v_cont li").width())*-1;
		        $(".v_cont").css("left",offset);				            	

	          	if(animateEnd==1){
	              	animateEnd=0;	
	                $(".v_cont").stop().animate({left:"0px"},"slow",function(){			                	
	                	$(".v_cont ul li").last().remove();
	                	animateEnd=1;			                  
	                }); 

	            } 
			    
			}

		});

 })
  
</script>
</html>
